<!DOCTYPE html><html><head><title>10-选择器高级应用&样式优先级</title><meta charset='utf-8'><link href='https://dn-maxiang.qbox.me/res-min/themes/marxico.css' rel='stylesheet'><style>
.note-content  {font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimSun, Song, sans-serif;}

</style></head><body><div id='preview-contents' class='note-content'>
                        
                    



<h1 id="10-选择器高级应用样式优先级">10-选择器高级应用&amp;样式优先级</h1>

<h3 id="一选择器优先级">一、选择器优先级</h3>



<h4 id="1基本选择器优先级排序">1、基本选择器优先级排序</h4>

<blockquote>
  <p><code>*</code>{} <br>
    <code>tagName</code>{} <br>
   <code>.class</code>{} <br>
   <code>#id</code>{}</p>
</blockquote>

<p>优先级： <code>*</code>&lt;  <code>tagName</code> &lt;    <code>class</code>  &lt;   <code>id</code></p>



<h4 id="2级别相同的选择器的优先级">2、级别相同的选择器的优先级</h4>

<p><code>后写的样式会覆盖前面的；(后来居高)</code></p>



<pre class="prettyprint hljs-dark"><code class="hljs processing"><div class="hljs-line">.wrap{<span class="hljs-built_in">background</span>:<span class="hljs-built_in">red</span>;}
</div><div class="hljs-line">.wrap{<span class="hljs-built_in">background</span>:<span class="hljs-built_in">green</span>;}<span class="hljs-comment">//最终使用的这个</span>
</div></code></pre>



<h4 id="4复杂后代选择器">4、复杂后代选择器</h4>

<blockquote>
  <p>1）比高低顺序依次是: ID选择器 class选择器 tagName{} ， <br>
    2）ID选择器个数不相等，ID个数多的优先级高，后面不用比 <br>
    2）ID选择器个数相等，则看class个数多的优先级高，后面不用比 <br>
    3）class 个数相等 ，再看tagName 个数 <br>
    4）#wrap ul li .list{} 和.wrap ul li #list{}优先级一样（不分先后）</p>
</blockquote>

<p>选择器使用原则：<code>准确的选中元素，并且不影响其他元素</code></p>



<h3 id="二-css样式的多种形式">二、 css样式的多种形式</h3>



<h4 id="1行间样式-行内样式">1、行间样式  / 行内样式</h4>



<pre class="prettyprint hljs-dark"><code class="hljs xml"><div class="hljs-line"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">'background-color:#f00;'</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div></code></pre>



<h4 id="2嵌css样式-内部样式">2、嵌（css）样式 / 内部样式</h4>



<pre class="prettyprint hljs-dark"><code class="hljs xml"><div class="hljs-line"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css">
</span></div><div class="hljs-line">    <span class="hljs-selector-id">#box</span>{
</div><div class="hljs-line">        <span class="hljs-attribute">background-color</span>:<span class="hljs-number">#f00</span>;
</div><div class="hljs-line">    }
</div><div class="hljs-line"><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>
</div></code></pre>



<h4 id="3外链css样式-外部样式">3、外链(css)样式 / 外部样式</h4>

<p><strong>第一种：常用的</strong> </p>



<pre class="prettyprint hljs-dark"><code class="hljs sml"><div class="hljs-line">&lt;link rel=<span class="hljs-symbol">'stylesheet'</span> <span class="hljs-keyword">type</span>=<span class="hljs-symbol">'text</span>/css' href=<span class="hljs-symbol">'url</span>.css'/&gt;
</div></code></pre>

<p><strong>第二种：少用的</strong> <br>
1)、在内部样式里引入其他css</p>



<pre class="prettyprint hljs-dark"><code class="hljs xml"><div class="hljs-line"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="xml">
</span></div><div class="hljs-line">    @import url('css路径’);   
</div><div class="hljs-line">    //要顶格写
</div><div class="hljs-line"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="undefined"></span>
</div></code></pre>

<p>2)、在外部样式里引入其他css</p>



<pre class="prettyprint hljs-dark"><code class="hljs less"><div class="hljs-line">    <span class="hljs-keyword">@import</span> url(<span class="hljs-string">'index.css'</span>);
</div><div class="hljs-line"><span class="hljs-comment">// 要顶格写</span>
</div></code></pre>

<p><code>注意：</code>需要设置编码格式@charset ‘UTF-8’;</p>

<p><strong>两种外部样式的区别：</strong></p>

<blockquote>
  <p>link 与 @import 差异</p>
  
  <ul><li>来源与作用  <br>
  <ul>
  <li>link 属于HTML 标签， 除了可以加载CSS外， 还可以加载其他文件，而@import 完全是CSS提供的一种方式，只能加载CSS。</li></ul></li>
  <li>加载顺序不同 <br>
  <ul>
  <li>link 引用的CSS会在页面被加载的时候同时加载,而@import 引用的CSS会等到页面全部被下载完再被加载，所以有时候会出现开始没有样式，之后页面闪烁一下出现样式（在网速慢的时候会更明显）。</li></ul></li>
  </ul>
</blockquote>



<h3 id="三css样式优先级排序">三、css样式优先级排序</h3>



<h4 id="1样式优先级排序">1、样式优先级排序：</h4>

<blockquote>
  <p>外链css样式  &lt;   （内嵌css）样式    &lt;     行间样式 <br>
  <code>!important</code>提升优先级（最高）</p>
</blockquote>



<h3 id="四常用css3">四、常用css3</h3>

<p><strong>1、border-radius </strong>圆角：给元素添加圆角的边框   </p>

<blockquote>
  <p>四个值：   左上   右上    右下    左下 <br>
  三个值：   左上   右上左下   右下 <br>
  两个值：   左上右下    右上左下  <br>
  一个值：所有角一样的值</p>
</blockquote>

<p><strong>2、box-shadow</strong> 盒子阴影：</p>

<blockquote>
  <p><code>h-shadow</code>     水平偏移量。允许负值  （必需） <br>
  <code>v-shadow</code>   垂直偏移量。允许负值  （必需） <br>
  <code>blur</code>       模糊半径        （可选。） <br>
  <code>spread</code>   阴影的扩展半径 （可选。） <br>
  <code>color</code>   阴影的颜色   （可选。） <br>
  <code>外部阴影</code>：（默认） <br>
  内部阴影：（<code>inset</code>可选 ）</p>
</blockquote>

<p><strong>3、overflow    </strong>：内容溢出的处理方式： <br>
<code>overflow-x</code>处理X方向的超出情况 <br>
<code>overflow-y</code> 处理Y方向的超出情况</p>

<blockquote>
  <p><code>visible</code>  默认值 内容可见 <br>
  <code>hidden</code>   隐藏，并且其余内容是不可见的。 <br>
  <code>scroll</code>   出现滚动条 <br>
  <code>auto</code> 根据内容情况来决定（是否）出现滚动条</p>
</blockquote>

<p><code>注:</code>只给一个方向的时候，另外一个方向是auto;</p></div></body></html>